<template>
    <div>
        <div class="content">
            <div class="left">
                <div class="tab">
                    <div :style="{ 'backgroundColor': tab === 0 ? '#2ebd85' : '#232830' }" @click="tabChange(0)" class="lb">
                        {{ $t('買入') }}
                    </div>
                    <div :style="{ 'backgroundColor': tab === 1 ? '#f5465d' : '#232830' }" @click="tabChange(1)" class="rb">
                        {{ $t('賣出') }}
                    </div>
                </div>
                <div class="select">
                    <div @click="selectShow" class="sele">
                        <span>{{ select === 0 ? $t('市價') : $t('限價') }}</span>
                        <van-icon class="down" name="arrow-down" />
                    </div>
                    <div v-show="isselectShow" class="selectitem">
                        <div @click="selectChange(0)" :style="{ 'color': select === 0 ? '#f2ce3d' : '#fff' }" class="item">
                            {{ $t('市價') }}</div>
                        <div @click="selectChange(1)" :style="{ 'color': select === 1 ? '#f2ce3d' : '#fff' }" class="item">
                            {{ $t('限價') }}</div>
                    </div>
                </div>
                <div v-if="select === 1" class="price">
                    <van-stepper v-model="xianjia" :min="0" input-width="124px" button-size="24px" class="xianjia"
                        step="0.1" :decimal-length="1" />
                    <van-stepper v-model="amount" :min="0" input-width="124px" button-size="24px" class="xianjia"
                        step="0.0001" :decimal-length="4" />
                    <!-- <div class="total">{{ total ? total : '成交額(USDT)' }}</div> -->
                    <div v-if="select === 1" class="percentage">
                        <div @click="percentageC(0.25)" class="item">
                            <div :style="{ backgroundColor: percentage >= 0.25 ? '#2ebd85' : '#232830' }" class="top"></div>
                            <div class="btm">25%</div>
                        </div>
                        <div @click="percentageC(0.5)" class="item">
                            <div :style="{ backgroundColor: percentage >= 0.5 ? '#2ebd85' : '#232830' }" class="top"></div>
                            <div class="btm">50%</div>
                        </div>
                        <div @click="percentageC(0.75)" class="item">
                            <div :style="{ backgroundColor: percentage >= 0.75 ? '#2ebd85' : '#232830' }" class="top"></div>
                            <div class="btm">75%</div>
                        </div>
                        <div @click="percentageC(1)" class="item">
                            <div :style="{ backgroundColor: percentage >= 1 ? '#2ebd85' : '#232830' }" class="top"></div>
                            <div class="btm">100%</div>
                        </div>
                    </div>
                    <input :placeholder="$t('成交額(USDT)')" v-model="total" class="total" type="number">
                </div>
                <div v-else class="shijia">
                    <div class="kong" style="">{{ $t('以市場最優價成交') }}</div>
                    <div class="twobtn">
                        <div class="lbtn" :style="{ 'color': tab === 0 ? '#a8aea8' : '#fff' }">{{ $t('數量') }}</div>
                        <div class="rbtn" :style="{ 'color': tab === 1 ? '#a8aea8' : '#fff' }">{{ $t('總額') }}</div>
                    </div>
                    <van-stepper style="margin-top: 5px;" v-if="tab === 1" v-model="amount" :min="0" input-width="124px"
                        button-size="24px" class="xianjia" step="0.0001" :decimal-length="4" />
                    <input v-else placeholder="USDT" v-model="pross" class="ipt" type="number">
                </div>
                <div v-if="select === 0" class="percentage">
                    <div @click="percentageC(0.25)" class="item">
                        <div :style="{ backgroundColor: percentage >= 0.25 ? '#2ebd85' : '#232830' }" class="top"></div>
                        <div class="btm">25%</div>
                    </div>
                    <div @click="percentageC(0.5)" class="item">
                        <div :style="{ backgroundColor: percentage >= 0.5 ? '#2ebd85' : '#232830' }" class="top"></div>
                        <div class="btm">50%</div>
                    </div>
                    <div @click="percentageC(0.75)" class="item">
                        <div :style="{ backgroundColor: percentage >= 0.75 ? '#2ebd85' : '#232830' }" class="top"></div>
                        <div class="btm">75%</div>
                    </div>
                    <div @click="percentageC(1)" class="item">
                        <div :style="{ backgroundColor: percentage >= 1 ? '#2ebd85' : '#232830' }" class="top"></div>
                        <div class="btm">100%</div>
                    </div>
                </div>
                <div :style="{ 'backgroundColor': tab === 0 ? '#2ebd85' : '#f5465d' }" class="deal">
                    {{ tab === 0 ? $t('買入') : $t('賣出') }}
                </div>
                <div class="asset">
                    <div class="keyong">
                        <div class="left">{{ $t('可用') }}</div>
                        <div class="rightt">USDT</div>
                    </div>
                    <div class="suoding">
                        <div class="left">{{ $t('鎖定') }}</div>
                        <div class="rightt">USDT</div>
                    </div>
                    <div class="zongzichan">
                        <div class="left">{{ $t('總資產') }}</div>
                        <div class="rightt">USDT</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="titl">
                    <div class="usdt">{{ $t('價格') }}<div>(USDT)</div>
                    </div>
                    <div class="ltc">{{ $t('數量') }}<div>(LTC)</div>
                    </div>
                </div>
                <div class="conten">
                    <div class="topitem"
                        :style="{ display: cardnum === 1 ? 'none' : 'block', height: cardnum === 2 ? '264px' : '132px' }">
                        <div v-for="item in  redList " class="item">
                            <div :style="{ left: item.percent }" class="length"></div>
                            <div class="le">{{ item.usdt }}</div>
                            <div class="ri">{{ item.ltc }}</div>
                        </div>
                    </div>
                    <div class="centre">
                        <div class="centre-t">67.11</div>
                        <div class="centre-b">67.11</div>
                    </div>
                    <div class="btmitem"
                        :style="{ display: cardnum === 2 ? 'none' : 'block', height: cardnum === 1 ? '264px' : '132px' }">
                        <div v-for=" item  in  greenList " class="item">
                            <div :style="{ left: item.percent }" class="length"></div>
                            <div class="le">{{ item.usdt }}</div>
                            <div class="ri">{{ item.ltc }}</div>
                        </div>
                    </div>
                </div>
                <div class="btmtab">
                    <div @click="cardChange(0)" :style="{ 'background-color': cardnum === 0 ? '#232830' : '#17171a' }"
                        class="num1">
                        <img src="@/assets/exchange/tab1.png" alt="">
                    </div>
                    <div @click="cardChange(1)" :style="{ 'background-color': cardnum === 1 ? '#232830' : '#17171a' }"
                        class="num1">
                        <img src="@/assets/exchange/tab2.png" alt="">
                    </div>
                    <div @click="cardChange(2)" :style="{ 'background-color': cardnum === 2 ? '#232830' : '#17171a' }"
                        class="num1">
                        <img src="@/assets/exchange/tab3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                <div class="left">{{ $t('當前委託') }}(0)</div>
                <div @click="goto('/orders')" class=" righ">
                    <van-icon name="description" color="#ccc" size="20px" />
                </div>
            </div>
            <div class="content">
                <div class="kong">
                    <img src="@/assets/exchange/qianbao.png" alt="">
                    <div class="lianjie">
                        <span style="color: #f2ce3d;">{{ $t('連接') }}</span>
                        <span> {{ $t('去交易') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()





//買入賣出
const tab = ref(0)
//市價限價
const select = ref(1)
//select是否显示
const isselectShow = ref(false)
//限价
const xianjia = ref(0)
//数量
const amount = ref('')
//百分比
const percentage = ref(0)

//买去
const pross = ref('')
//红色list
const redList = ref([
    { usdt: 67.22, ltc: 164.812, percent: '56%' },
    { usdt: 67.22, ltc: 164.812, percent: '50%' },
    { usdt: 67.22, ltc: 164.812, percent: '46%' },
    { usdt: 67.22, ltc: 164.812, percent: '40%' },
    { usdt: 67.22, ltc: 164.812, percent: '35%' },
    { usdt: 67.22, ltc: 164.812, percent: '30%' },
    { usdt: 67.22, ltc: 164.812, percent: '25%' },
    { usdt: 67.22, ltc: 164.812, percent: '20%' },
    { usdt: 67.22, ltc: 164.812, percent: '15%' },
    { usdt: 67.22, ltc: 164.812, percent: '10%' },
    { usdt: 67.22, ltc: 164.812, percent: '5%' },
])
//绿色List
const greenList = ref([
    { usdt: 67.22, ltc: 164.812, percent: '56%' },
    { usdt: 67.22, ltc: 164.812, percent: '50%' },
    { usdt: 67.22, ltc: 164.812, percent: '46%' },
    { usdt: 67.22, ltc: 164.812, percent: '40%' },
    { usdt: 67.22, ltc: 164.812, percent: '35%' },
    { usdt: 67.22, ltc: 164.812, percent: '30%' },
    { usdt: 67.22, ltc: 164.812, percent: '25%' },
    { usdt: 67.22, ltc: 164.812, percent: '20%' },
    { usdt: 67.22, ltc: 164.812, percent: '15%' },
    { usdt: 67.22, ltc: 164.812, percent: '10%' },
    { usdt: 67.22, ltc: 164.812, percent: '5%' },
])

//列表参数
const cardnum = ref(0)

function goto(url) {
    router.push(url)
}

// 切換買入賣出
function tabChange(index) {
    if (tab.value == index) return
    tab.value = index
}

//select是否显示
function selectShow() {
    isselectShow.value = !isselectShow.value
}

//切換市價限價
function selectChange(index) {
    if (select.value == index) return
    select.value = index
    isselectShow.value = false
}

//总价
const total = computed(() => {
    return xianjia.value * amount.value
})

//列表切换
function cardChange(num) {
    if (cardnum.value == num) return
    cardnum.value = num
}

//百分比计算
function percentageC(val) {
    console.log(percentage.value);
    if (percentage.value && percentage.value === val) {
        return percentage.value = 0
    }
    percentage.value = val
    console.log(percentage.value);
}
</script>

<style lang="scss" scoped>
::v-deep .ipt {
    margin-top: 5px;
    background-color: #232830;
    border: 0;
    font-size: 14px;
    text-align: center;
}

::v-deep .total {
    margin-top: 5px;
    background-color: #232830;
    border: 0;
    font-size: 14px;
    text-align: center;
}

//输入框样式调整  ----------------start
::v-deep .van-stepper__minus {
    height: 36px !important;
    background-color: #232830 !important;
}

::v-deep .van-stepper__plus {
    height: 36px !important;
    background-color: #232830 !important;
}

::v-deep .van-stepper__minus:before {
    background-color: #fff !important;
}

::v-deep .van-stepper__plus:before {
    background-color: #fff !important;
}

::v-deep .van-stepper__plus::after {
    background-color: #fff !important;
    height: 12px;
}

::v-deep .van-stepper__input {
    height: 36px !important;
    background-color: #232830 !important;
}

//输入框样式调整  ----------------end

.content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 439px;
    // background-color: aqua;

    .left {
        width: 176px;
        height: 100%;
        // background-color: red;

        .tab {
            display: flex;
            width: 100%;
            height: 34px;
            border-radius: 5px;
            margin-bottom: 12px;
            overflow: hidden;

            .lb {
                width: 50%;
                height: 100%;
                font-size: 15px;
                text-align: center;
                line-height: 34px;
                color: #fff;
            }

            .rb {
                width: 50%;
                height: 100%;
                font-size: 15px;
                text-align: center;
                line-height: 34px;
                color: #fff;
            }
        }

        .select {
            position: relative;
            width: 100%;
            height: 40px;

            .sele {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 40px;
                background-color: #232830;
                font-size: 15px;
                color: #fff;
                border-radius: 5px;


                .down {
                    position: absolute;
                    right: 10px;
                }
            }

            .selectitem {
                position: absolute;
                width: 100%;
                height: 60px;
                background-color: #232830;
                font-size: 15px;
                color: #fff;
                border-radius: 5px;

                .item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 5px 0;
                    width: 100%;
                    height: 30px;
                    box-sizing: border-box;
                }
            }
        }

        .price {
            width: 100%;
            margin-top: 10px;

            .xianjia {}

            .total {
                width: 176px;
                height: 40px;
                box-sizing: border-box;
            }
        }

        .shijia {
            .kong {
                width: 100%;
                height: 40px;
                background-color: #232830;
                font-size: 14px;
                color: #a8aea8;
                border-radius: 5px;
                margin-top: 10px;
                text-align: center;
                line-height: 40px;
            }

            .twobtn {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 40px;
                font-size: 14px;
                margin-top: 10px;

                .lbtn {
                    width: 84px;
                    height: 40px;
                    background-color: #232830;
                    text-align: center;
                    line-height: 40px;
                }

                .rbtn {
                    width: 84px;
                    height: 40px;
                    background-color: #232830;
                    text-align: center;
                    line-height: 40px;
                }
            }

            .ipt {
                width: 176px;
                height: 40px;
                box-sizing: border-box;
            }
        }

        .percentage {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
            font-size: 12px;
            color: #fff;

            .top {
                width: 41.36px;
                height: 7px;
                background-color: #2ebd85;
                border-radius: 2px;
            }

            .btm {
                text-align: center;
            }
        }

        .deal {
            width: 100%;
            height: 40px;
            margin-top: 10px;
            font-size: 15px;
            color: #fff;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
        }

        .asset {
            .keyong {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: 15px;

                .left {
                    font-size: 14px;
                    color: #a8aeae;
                }

                .rightt {
                    font-size: 12px;
                    color: #fff;
                }
            }

            .suoding {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: 10px;
                border-bottom: 1px solid #ccc;
                padding-bottom: 10px;

                .left {
                    font-size: 14px;
                    color: #a8aeae;
                }

                .rightt {
                    font-size: 12px;
                    color: #fff;
                }
            }

            .zongzichan {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: 15px;

                .left {
                    font-size: 14px;
                    color: #a8aeae;
                }

                .rightt {
                    font-size: 12px;
                    color: #fff;
                }
            }
        }
    }

    .right {
        flex: 1;
        // width: 176px;
        height: 100%;
        margin-left: 12px;
        // background-color: green;

        .titl {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 14px;
            color: #a8aea8;
            margin-bottom: 14px;
        }

        .conten {
            width: 100%;

            .topitem {
                width: 100%;
                height: 132px;
                overflow: hidden;

                .item {
                    position: relative;
                    height: 22px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;

                    .le {
                        color: #f5465d;
                    }

                    .ri {
                        color: #a8aea8;
                    }

                    .length {
                        position: absolute;
                        width: 100%;
                        height: 22px;
                        background-color: rgba(245, 70, 93, 0.15);
                    }
                }
            }

            .centre {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                width: 100%;
                height: 78px;

                .centre-t {
                    font-size: 17px;
                    color: #2ebd85;
                }

                .centre-b {
                    font-size: 14px;
                    color: #a8aea8;

                }
            }

            .btmitem {
                width: 100%;
                height: 132px;
                overflow: hidden;

                .item {
                    position: relative;
                    height: 22px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;

                    .le {
                        color: #2ebd85;
                    }

                    .ri {
                        color: #a8aea8;
                    }

                    .length {
                        position: absolute;
                        width: 100%;
                        height: 22px;
                        background-color: rgba(245, 70, 93, 0.15);
                    }

                }
            }

        }

        .btmtab {
            width: 100%;
            display: flex;
            justify-content: space-evenly;

            .num1 {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 33.33%;
                padding: 7px 16px;
                box-sizing: border-box;
                border-radius: 5px;

                img {
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
}

.bottom {
    width: 100%;
    height: 100%;
    background-color: #17171a;
    padding: 15px 0;
    box-sizing: border-box;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 20px;
        color: #fff;
        font-size: 15px;

        .righ {
            width: 20px;
            height: 20px;
        }
    }

    .content {
        width: 100%;
        height: 300px;

        .kong {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
            color: #a8aea8;
            font-size: 14px;

            img {
                width: 77px;
                height: 83px;
            }

        }
    }
}
</style>